import { messages } from "share/common";
import React from "react";
import "styles/third-consumption/third-consumption.scss";
import { Carousel } from "antd";
// banner 小图  命名xxxxx01_2  01代表下标  2代表hover效果
import banner1_1 from "images/third-consumption/vendor_banner_01_1.png";
import banner1_2 from "images/third-consumption/vendor_banner_01_2.png";
import banner2_1 from "images/third-consumption/vendor_banner_02_1.png";
import banner2_2 from "images/third-consumption/vendor_banner_02_2.png";
import banner3_1 from "images/third-consumption/vendor_banner_03_1.png";
import banner3_2 from "images/third-consumption/vendor_banner_03_2.png";
import banner4_1 from "images/third-consumption/vendor_banner_04_1.png";
import banner4_2 from "images/third-consumption/vendor_banner_04_2.png";
import banner5_1 from "images/third-consumption/vendor_banner_05_1.png";
import banner5_2 from "images/third-consumption/vendor_banner_05_2.png";

const bannerGalleryData = [
  {
    defaultImg: banner1_1,
    hoverImg: banner1_2,
    desc: messages("supplier-1.key778") /*差旅场景全覆盖*/,
    bannerImg:
      "https://helioscloud-uat-static.oss-cn-shanghai.aliyuncs.com/e41fb180-7082-4f47-8b05-7f7e7ff04172/other/a4cfb8a8-7d54-44ae-9045-6f9a3a056957-vendor_banner_main01.jpg",
    bannerText: [
      {
        title: messages("supplier-1.key779") /*国内外主流消费商*/,
        desc: messages(
          "supplier-1.key780"
        ) /*已对接国内外主流消费商40余家，高德打车，携程商旅、同程商旅、美亚商旅、差旅壹号、空港嘉华、泛嘉国际、优行商旅、中青旅、BCD、FCM、国旅运通、饿了么、滴滴企业版、大唐商旅、傲翔商旅、中集商旅、美团点评、途牛、阿里商旅、程多多、程腾国际商旅、在途商旅等*/,
      },
      {
        title: messages("supplier-1.key781") /*多场景支持*/,
        desc: messages("supplier-1.key782") /*机票预订、酒店预订、火车预订、线上打车、堂食外卖、话费充值等*/,
      },
      {
        title: messages("supplier-1.key783") /*多管控方式*/,
        desc: messages("supplier-1.key784") /*先申请后预订、先下单后审批*/,
      },
    ],
  },
  {
    defaultImg: banner2_1,
    hoverImg: banner2_2,
    desc: messages("supplier-1.key785") /*比价平台*/,
    bannerImg:
      "https://helioscloud-uat-static.oss-cn-shanghai.aliyuncs.com/e41fb180-7082-4f47-8b05-7f7e7ff04172/other/c6e62147-e620-4971-8cab-e84e69e46ea6-vendor_banner_main02.jpg",
    bannerText: [
      {
        title: messages("supplier-1.key786") /*国内酒店比价（统一预订平台）*/,
        desc: messages("supplier-1.key787") /*美亚商旅、同程商旅、华住、汇联易自有资源等*/,
      },
      {
        title: messages("supplier-1.key788") /*国内机票比价（统一预订平台）*/,
        desc: messages(
          "supplier-1.key789"
        ) /*美亚商旅、同程商旅、FCM、途牛、傲翔、程多多、优行商旅、丽途商旅、铁航、商旅e路通*/,
      },
      {
        title: messages("supplier-1.key790") /*国际机票询价平台*/,
        desc: "",
      },
    ],
  },
  {
    defaultImg: banner3_1,
    hoverImg: banner3_2,
    desc: messages("supplier-1.key791") /*强大的研发实力*/,
    bannerImg:
      "https://helioscloud-uat-static.oss-cn-shanghai.aliyuncs.com/e41fb180-7082-4f47-8b05-7f7e7ff04172/other/b7d68b43-f227-410e-b9fe-b51537a91668-vendor_banner_main03.jpg",
    bannerText: [
      {
        title: messages("supplier-1.key792") /*为全球百万用户提供服务*/,
        desc: "",
      },
      {
        title: messages("supplier-1.key793") /*强大的研发实力，安全稳定可靠的系统支持*/,
        desc: messages("supplier-1.key794") /*来自互联网优秀的技术研发团队，打造安全稳定的可用系统*/,
      },
      {
        title: messages("supplier-1.key795") /*安全稳定*/,
        desc: messages("supplier-1.key796") /*多年技术积累，混合云部署，云防火墙，全方位监控，为百万员工保驾护航*/,
      },
      {
        title: messages("supplier-1.key797") /*极致体验*/,
        desc: messages("supplier-1.key798") /*优秀的端技术，让你的员工无论身在何处，均能获得灵活的极致体验*/,
      },
    ],
  },
  {
    defaultImg: banner4_1,
    hoverImg: banner4_2,
    desc: messages("supplier-1.key799") /*对账管理*/,
    bannerImg:
      "https://helioscloud-uat-static.oss-cn-shanghai.aliyuncs.com/e41fb180-7082-4f47-8b05-7f7e7ff04172/other/8ff6cdc4-475a-4144-aa68-b755a4a54a43-vendor_banner_main04.jpg",
    bannerText: [
      {
        title: messages(
          "supplier-1.key800"
        ) /*汇总预订数据，线上预订数据自动汇总至对账中心，线下预订数据支持导入对账中心*/,
        desc: "",
      },
      {
        title: messages("supplier-1.key801") /*支持多种对账逻辑，自定义对账周期配置*/,
        desc: "",
      },
      {
        title: messages("supplier-1.key802") /*支持导出，便于企业线下操作*/,
        desc: "",
      },
    ],
  },
  {
    defaultImg: banner5_1,
    hoverImg: banner5_2,
    desc: messages("supplier-1.key803") /*报表统计*/,
    bannerImg:
      "https://helioscloud-uat-static.oss-cn-shanghai.aliyuncs.com/e41fb180-7082-4f47-8b05-7f7e7ff04172/other/97e105ad-076c-4861-b7c0-658253d2192f-vendor_banner_main05.jpg",
    bannerText: [
      {
        title: messages("supplier-1.key804") /*打车出行汇总报表*/,
        desc: "",
      },
      {
        title: messages("supplier-1.key805") /*AirPlus明细报表*/,
        desc: "",
      },
      {
        title: messages("supplier-1.key806") /*机票管理报告*/,
        desc: "",
      },
      {
        title: messages("supplier-1.key807") /*酒店管理报告*/,
        desc: "",
      },
    ],
  },
];

const Banner = () => {
  const mouseInHandle = (e, i) => {
    const eles = document.getElementsByClassName("gallery-item__logo_img");
    eles[i].setAttribute("src", bannerGalleryData[i].hoverImg);
  };
  const mouseOutHandle = (e, i) => {
    const eles = document.getElementsByClassName("gallery-item__logo_img");
    eles[i].setAttribute("src", bannerGalleryData[i].defaultImg);
  };
  return (
    <div className="third-consumption-banner">
      <div className="banner-title">{messages("supplier-1.key808") /*一站式差旅解决方案*/}</div>
      <div className="banner-gallery">
        {bannerGalleryData.map((item, i) => {
          return (
            <div
              className="gallery-item"
              key={i}
              onMouseOver={(e) => mouseInHandle(e, i)}
              onMouseOut={(e) => {
                mouseOutHandle(e, i);
              }}
            >
              <div className="gallery-item__logo">
                <img className="gallery-item__logo_img" src={item.defaultImg} alt="" />
              </div>
              <div className="gallery-item__desc">{item.desc}</div>
            </div>
          );
        })}
      </div>
      <div className="banner-content">
        <Carousel effect="fade" autoplay>
          {bannerGalleryData.map((item, i) => {
            return (
              <div key={i}>
                <img className="banner-img__main" src={item.bannerImg} alt="" />
                <div className="introduction">
                  {item.bannerText.map((textObj, j) => {
                    return (
                      <div className="intro-item" key={j}>
                        <div className="intro-title">
                          <div className="circle" />
                          {textObj.title}
                        </div>
                        <div className="intro-desc">{textObj.desc}</div>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </Carousel>
      </div>
    </div>
  );
};

export default Banner;
